<template>
  <div>
    <van-nav-bar
      title="用户登录"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div style="margin: 50px 0 30px" class="login-box">
      <img src="../../assets/images/login.jpg" class="login-img" alt="" />
    </div>
    <!-- <div class="logo" style="margin-top: 70px">
      <van-image
        width="10rem"
        height="5rem"
        fit="contain"
        src="https://cdn2.lmonkey.com/94f152aaa94d937ccf5de78f3fcac59f/3b6e32e7bc8145a283431f260c3c1d1a.png"
      />
    </div> -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="queryInfo.email"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="queryInfo.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <div class="go-register" @click="router.push('/register')">
          没有帐号，立即注册
        </div>
        <van-button type="success" round block native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '../../network/login'
import { Toast } from 'vant'
export default {
  setup () {
    const router = useRouter()
    const state = reactive({
      queryInfo: {
        email: '',
        password: ''
      }
    })
    const goBack = () => {
      router.go(-1)
    }
    const onSubmit = () => {
      login(state.queryInfo).then(res => {
        console.log(res)
        window.localStorage.setItem('token', res.access_token)
        Toast.success('登录成功')
        state.queryInfo.email = ''
        state.queryInfo.password = ''
        setTimeout(() => {
          router.go(-1)
        }, 500)
      })
    }
    return {
      ...toRefs(state),
      goBack,
      onSubmit,
      router
    }
  }
}
</script>
<style scoped>
.van-button--success {
  background-color: #42b983;
}
.login-img {
  width: 30%;
  height: 30%;
}
.go-register {
  margin: 15px 0;
  text-align: left;
  font-size: 14px;
  color: #42b983;
}
</style>
